<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header">
</head>
<body class="gray-bg">
	<div class="container-div" >
		<div class="col-sm-12 search-collapse">
			<form id="nlInfo-form">
				<div class="select-list">
					<ul>
						<li>
							开始日期：<input type="text" name="signStdt" />
						</li>
						<li>
							截止日期：<input type="text" name="signEddt" />
						</li>
						<li>
							<a class="btn btn-primary btn-rounded btn-sm" onclick="alert('生成报表');"><i class="fa fa-search"></i>&nbsp;搜索</a>
						    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset();"><i class="fa fa-refresh"></i>&nbsp;重置</a>
						</li>
					</ul>
				</div>
			</form>
		</div>
		<div class="col-sm-12 select-table table-striped" id='__echarts__main__'></div>
	</div>
	<div th:include="include :: footer"></div>
	<script th:inline="javascript">
		function Echarts(dom, title, xAxisData) {	//构造echarts对象
			this.dom = dom;				// Element
			this.title = title;			// String
			this.xAxisData = xAxisData; // Array
		}
		Echarts.prototype.init = function () {		//echarts对象初始化
			var _this = this;
			var myChart = echarts.init(this.dom);	//初始化一个echarts对象
			var workDone = [];						//后台数据：已完成
			var workLeft = [];						//后台数据：剩余
			$.ajax({								//异步调用，从后台获取数据，并展示到页面
	        	url:'work/workCount',
	            async:true,			//是否为异步请求
	            cache:false,  		//是否缓存结果
	            type:"POST",  		//请求方式
	            dataType:"json",	//服务器返回数据类型
	            success:function(result) {
	                //遍历后台数据，将要用的数据放到定义好的数组中，不然获取不到值
	             	for (var i = result.length - 1; i >= 0; i--) {
	             		workDone.push(result[i].done);
	             		workLeft.push(result[i].left);
					}
	                if (result) {
	                	var option = {	//给echarts对象赋值
		            		title: {
								text: _this.title
							},
							toolbox: {
								feature: {
									saveAsImage: {	//保存图片
										show: true
									},
									dataView: {		//数据视图
										show: true
									},
									restore: {		//还原
										show: true
									},
									dataZoom: {		//缩放
										show: true
									},
									magicType: {	//类型切换：折线图<-->柱形图
										type: ['line', 'bar']
									}
								}
							},
			            	xAxis: {	//横坐标
			               		data: _this.xAxisData
		            		},
		            		yAxis: {},	//纵坐标
		            		legend: {	//数据含义
								data: ['已完成', '剩余']
							},
							tooltip: {	//提示
								trigger: 'axis'
							},
			            	series: [	//展示数据
				            	{
				            		name: '已完成',
				                 	data: workDone,
				                 	type: 'bar'
				             	},
				             	{
				             		name: '剩余',
				                 	data: workLeft,
				                 	type: 'bar'
				             	}
			             	]
		           		};
		            	myChart.setOption(option);	//给echarts对象赋值
	                } else {
	                    alert("网页错误，请重写刷新网站");	//异步调用失败
					}
				}
	        })
	    }
	    function eChartsInit(dom, title, xAxisData) {	//构造echarts对象并初始化
			return new Echarts(dom, title, xAxisData).init();
		}
		var dom = document.getElementById('__echarts__main__');
	    var xData = ['建行运营配送', '建行代理保险云', '众邦影像平台', '武汉农商行影像平台', '交行人月外包', '工行柜面无纸化'];
		eChartsInit(dom, '项目人月使用情况', xData);
	</script>
</body>
</html>